<template>
    <!-- 自定义导航栏 -->
    <div
        class="van-nav-bar van-nav-bar--fixed"
        :style="{
            'background-color': backColor + '!important',
            'padding-top': safeTop
        }"
    >
        <!-- 开启顶部安全区适配 -->
        <div class="van-nav-bar__content">
            <div class="van-nav-bar__left">
                <slot name="left">
                    <img
                        @click="backFunction"
                        class="back-icon"
                        :style="{ filter: color === 'black' ? 'invert(1)' : 'invert(0)' }"
                        :src="back"
                        alt=""
                    />
                </slot>
            </div>
            <slot name="title">
                <div class="van-nav-bar__title van-ellipsis" :style="{ 'font-weight': fontWeight, color: color }">
                    {{ title || route.meta.title }}
                </div>
            </slot>
            <div class="van-nav-bar__right">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
    <div v-if="isPlaceholder" class="nav-top-placeholder" :style="{ 'padding-top': safeTop }"></div>
</template>

<script setup>
import { onMounted, ref, defineProps, computed } from "vue";
import { pageReturn } from "@/utils";
import back from "@/assets/svg/back.svg";
import { useRoute } from "vue-router";

const route = useRoute();

const props = defineProps({
    title: {
        required: false,
        type: String
    },
    isPlaceholder: {
        required: false,
        type: Boolean,
        default: true
    },
    backFunction: {
        required: false,
        type: Function,
        default: pageReturn
    },
    backColor: {
        required: false,
        type: String,
        default: "#fafafa"
    },
    fontWeight: {
        required: false,
        type: Number,
        default: 500
    },
    color: {
        required: false,
        type: String,
        default: "#000"
    }
});
const safeTop = computed(() => {
    return `${window?.TongBridge?.clientInfo?.safeTop || 0}px`;
});
const navHeight = computed(() => {
    return `${(window?.TongBridge?.clientInfo?.safeTop || 0) + 46}px`;
});
</script>
<style lang="less" scoped>
.van-nav-bar {
    width: 100%;
    border: none;
    z-index: 13;
    position: relative;
    text-align: center;
    user-select: none;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: content-box;
    height: 44px;

    &::after {
        display: none;
    }
}

.van-nav-bar--fixed {
    position: fixed;
}

.back-icon {
    width: 24px;
    height: 24px;
}

.van-nav-bar__content {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
}

.van-nav-bar__left,
.van-nav-bar__right {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.van-nav-bar__left {
    left: 0;
}

.van-nav-bar__right {
    right: 0;
}

.van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    font-size: 18px;
    color: #fff;
}

.van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nav-top-placeholder {
    width: 100%;
    background-color: none;
    opacity: 0;
    height: 44px;
    box-sizing: content-box;
    flex-shrink: 0;
}
</style>
